import React from 'react'
import { Link } from 'react-router-dom'
import { inject } from 'mobx-react';

import Login from '@src/components/LoginNew'

import './index.scss';

import Swiper from 'swiper/js/swiper.js'
import 'swiper/css/swiper.min.css'


class loginPage extends React.Component {

    constructor(props) {
        super(props);


        this.state = {
            sliderList: [
                {
                    ImgUrl: require('@src/imgs/1.jpg')
                },
                {
                    ImgUrl: require('@src/imgs/2.jpg')
                }, {
                    ImgUrl: require('@src/imgs/3.jpg')
                },
            ]
        };
    }


    render() {
        return (
            <div className="LoginPage page_container   fast">


                <div className="mid_container animated  delay-1s">
                    <div className="left_container">
                        <div className="swiper-container login_bg_container" style={{ width: '100%', height: '100%' }}>
                            <div className="swiper-wrapper">

                                {


                                    this.state.sliderList.map((item, index) => {
                                        return (
                                            <div className="swiper-slide" key={index}>
                                                <img src={item.ImgUrl} alt="" />
                                            </div>
                                        )
                                    })
                                }


                            </div>
                            <div className="swiper-pagination"></div>
                        </div>

                    </div>
                    <div className="right_container">
                        <Login className="animated fadeInDown" />
                    </div>
                </div>



            </div >
        )
    }

    componentDidMount() {
        new Swiper('.swiper-container', {
            loop: true,  //循环
            autoplay: {   //滑动后继续播放（不写官方默认暂停）
                disableOnInteraction: false,
            },
            pagination: {  //分页器
                el: '.swiper-pagination'
            }
        })
    }
}

export default loginPage;